---
title: データフェッチ
description: Astroでfetch APIを使用してリモートのデータを取得する方法を学びましょう。
i18nReady: true
---

`.astro`ファイルでは、リモートのデータを取得してページを生成できます。

## Astroでの`fetch()`

[Astroコンポーネント](/ja/basics/astro-components/)では、コンポーネントのスクリプトで[グローバルの`fetch()`関数](https://developer.mozilla.org/ja/docs/Web/API/fetch)にアクセスできます。これにより、https://example.com/api や`Astro.url + "/api"`のようにURL全体を指定してAPIにHTTPリクエストをおこなえます。

このfetch呼び出しはビルド時に実行され、そのデータは動的なHTMLを生成するためにコンポーネントテンプレートで利用できます。[SSR](/ja/guides/server-side-rendering/)モードが有効になっている場合、fetch呼び出しはランタイムに実行されます。

💡 Astroコンポーネントスクリプトの内部で、[**top-level await**](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/await#top_level_await)を利用できます。

💡 取得したデータは、Astroコンポーネントとフレームワークコンポーネント両方にpropsとして渡せます。

```astro /await fetch\\(.*?\\)/
---
// src/components/User.astro
import Contact from '../components/Contact.jsx';
import Location from '../components/Location.astro';

const response = await fetch('https://randomuser.me/api/');
const data = await response.json();
const randomUser = data.results[0]
---
<!-- ビルド時に取得したデータでHTMLがレンダリングされます。 -->
<h1>ユーザー</h1>
<h2>{randomUser.name.first} {randomUser.name.last}</h2>

<!-- ビルド時に取得したデータがpropsとしてコンポーネントに渡されます。 -->
<Contact client:load email={randomUser.email} />
<Location city={randomUser.location.city} />
```

:::note
Astroコンポーネントのすべてのデータは、コンポーネントがレンダリングされるときにフェッチされることを覚えておいてください。

デプロイされたAstroサイトは、**ビルド時に一度だけ**データをfetchします。開発環境では、コンポーネントの更新時にfetchされたデータが表示されます。クライアントサイドで何度もデータを再取得する必要がある場合は、Astroコンポーネントで[フレームワークコンポーネント](/ja/guides/framework-components/)または[クライアントサイドスクリプト](/ja/guides/client-side-scripts/)を使用します。
:::


## フレームワークコンポーネントでの`fetch()`

`fetch()`関数は、任意の[フレームワークコンポーネント](/ja/guides/framework-components/)からもグローバルに利用できます。

```tsx title="src/components/Movies.tsx" /await fetch\\(.*?\\)/
import type { FunctionalComponent } from 'preact';

const data = await fetch('https://example.com/movies.json').then((response) =>
  response.json()
);

// ビルド時にレンダリングされるコンポーネントはCLIにもログを出力します。
// client:* ディレクティブでレンダリングされた場合、ブラウザコンソールにもログが出力されます。
console.log(data);

const Movies: FunctionalComponent = () => {
  // 結果をページに出力する
  return <div>{JSON.stringify(data)}</div>;
};

export default Movies;
```


## GraphQLクエリ

Astroはまた、`fetch()`を使用して任意の有効なGraphQLクエリでGraphQLサーバーにクエリを投げられます。

```astro title="src/components/Film.astro" "await fetch"
---
const response = await fetch("https://swapi-graphql.netlify.app/.netlify/functions/index",
  {
    method: 'POST',
    headers: {'Content-Type':'application/json'},
    body: JSON.stringify({
      query: `
        query getFilm ($id:ID!) {
          film(id: $id) {
            title
            releaseDate
          }
        }
      `,
      variables: {
        id: "ZmlsbXM6MQ==",
      },
    }),
  });

const json = await response.json();
const { film } = json.data;
---
<h1>Star Wars: A New Hopeに関する情報を取得</h1>
<h2>タイトル: {film.title}</h2>
<p>公開年: {film.releaseDate}</p>
```

## ヘッドレスCMSからのfetch

Astroコンポーネントは、お気に入りのCMSからデータを取得し、それをページコンテンツとしてレンダリングできます。[動的ルーティング](/ja/guides/routing/#動的ルーティング)を使用すれば、コンポーネントはCMSコンテンツをもとにページを生成できます。

StoryblokやContentful、WordPressなどのヘッドレスCMSとAstroを組み合わせる方法について詳しくは、[CMSガイド](/ja/guides/cms/)を参照してください。

## コミュニティリソース

- [Creating a fullstack app with Astro + GraphQL](https://robkendal.co.uk/blog/how-to-build-astro-site-with-graphql/)
